<template>
  <div class="app-container">
    <SearchArea
      @addProduct="dialogProd($event)"
      @share="dialogShare($event)"
      style="margin-bottom: 10px"
      @checkPorcelainList="checkPorcelainList"
      :options="options"
    />
    <addProduct
      ref="dialogProd"
      @addProduct="addProduct"
      @changeEditData="changeEditData"
      :options="options"
    />
    <shareProduct ref="dialogShare" />
    <Prodetail ref="Prodetail" />
    <DenialReason ref="DenialReason" />
    <el-table
      v-loading="listLoading"
      :data="i_list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      :header-row-class-name="tableRowClassName"
    >
      <el-table-column align="center" label="产品编号">
        <template slot-scope="scope">
          <!--          {{ scope.$index }}-->
          {{ scope.row.porcelainCode }}
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center">
        <template slot-scope="scope">{{ scope.row.porcelainType }}</template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.porcelainName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status === 1"
            :type="scope.row.status | statusFilter"
            >已通过</el-tag
          >
          <el-tag
            v-else-if="scope.row.status === 0"
            :type="scope.row.status | statusFilter"
            >审核中</el-tag
          >
          <el-tag v-else :type="scope.row.status | statusFilter">未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="创建时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.submitTime | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <div v-if="scope.row.status == '1'">
            <EButton
              class="i-button"
              :color="'success'"
              :title="'分享'"
              @share="share"
            />
            <EButton
              class="i-button"
              :color="'info'"
              :title="'查看信息'"
              @checkout="checkout(scope.$index)"
            />
            <EButton
              class="i-button"
              :title="'编辑'"
              @edit="edit(scope.$index)"
            />
            <EButton
              class="i-button"
              :color="'danger'"
              :title="'删除'"
              @deletes="deletes(scope.$index, i_list)"
            />
          </div>
          <div v-else-if="scope.row.status == '-1'">
            <EButton
              class="i-button"
              :color="'warning'"
              :title="'拒绝原因'"
              @refuse="refuse(scope.$index)"
            />
            <EButton
              class="i-button"
              :title="'编辑'"
              @edit="edit(scope.$index)"
            />
            <EButton
              class="i-button"
              :color="'danger'"
              :title="'删除'"
              @deletes="deletes(scope.$index, i_list)"
            />
          </div>
          <div v-else="scope.row.status=='0">
            <EButton
              class="i-button"
              :color="'info'"
              :title="'查看信息'"
              @checkout="checkout(scope.$index)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      @current-change="changeIndex"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import SearchArea from "../../components/SearchArea/index";
import addProduct from "../../components/Dialog/addProduct";
import shareProduct from "../../components/Dialog/shareProduct";
import Prodetail from "../../components/Dialog/Prodetail";
import DenialReason from "../../components/Dialog/DenialReason";
import EButton from "../../components/ButtonBox/index";
import { getDate } from "@/utils/category";
import { getProducts, getCheckoutCate, getDeleteData } from "@/utils/table.js";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        "1": "success",
        "0": "gray",
        "-1": "danger",
      };
      return statusMap[status];
    },
    dataFormat() {
      let dt = new Date();
      let y = dt.getFullYear();
      let m = dt.getMonth() + 1;
      let d = dt.getDate();
      let h = dt.getHours();
      let f = dt.getMinutes();
      let s = dt.getSeconds();
      return `${y}-${m}-${d}/${h}:${f}:${s}`;
    },
  },
  components: {
    Prodetail,
    SearchArea,
    addProduct,
    shareProduct,
    EButton,
    DenialReason,
  },
  data() {
    return {
      // list: null,
      pageIndex: 1,
      i_list: [],
      listLoading: false,
      options: [],
      total: 10,
    };
  },
  async created() {
    this.getData();
    if (this.$store.commit("getCategory")) {
      this.options = this.$store.commit("getCategory");
    } else {
      let res = await getDate("/porcelainType/");
      this.$store.commit("setCategory", res.data);
      this.options = res.data;
      this.total = res.pages * 10;
    }
  },
  methods: {
    //弹出dialog
    dialogProd(e) {
      this.$refs.dialogProd.changeVisible(e);
    },
    dialogShare(e) {
      this.$refs.dialogShare.changeVisible();
    },
    share() {
      this.$refs.dialogShare.changeVisible();
    },
    edit(index) {
      let data = {
        pre: "编辑",
        porcelainCode: this.i_list[index].porcelainCode,
        type: "put",
        index: index,
        totalData: this.i_list[index],
      };
      this.$refs.dialogProd.changeVisible(data);
    },
    checkout(index) {
      this.$refs.Prodetail.changeVisible(this.i_list[index]);
    },
    refuse(index) {
      this.$refs.DenialReason.changeVisible(this.i_list[index]);
    },
    deletes(index, rows) {
      const h = this.$createElement;
      this.$confirm("", "删除提示!", {
        message: h("div", { style: "padding:10px 10px;" }, [
          h(
            "div",
            {
              style:
                "height:100px;   display: flex;\n" +
                "    flex-direction: column;\n" +
                "    justify-content: center;padding-left:10px;background:#F2F2F2",
            },
            [
              h("div", null, `产品编号:${this.i_list[index].porcelainCode}`),
              h(
                "div",
                { style: "margin-top:10px;" },
                `产品名称:  ${this.i_list[index].porcelainName}`
              ),
            ]
          ),
          h("div", { style: "margin-top:10px" }, "确定删除该分类吗? "),
        ]),
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "info",
            message: "确定",
          });
          getDeleteData(`/${this.i_list[index].porcelainCode}`);
          rows.splice(index, 1);
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
    },
    changeIndex(i) {
      this.getData(i);
      this.pageIndex = i;
    },
    addProduct(prod) {
      this.i_list.push(prod.CmPorcelain);
    },
    changeEditData(data, index) {
      // if (this.i_list[index].status==-1){
      //   data.status=0
      // }
      data.status = this.i_list[index].status;

      this.i_list.splice(index, 1, data);
    },
    getData(i) {
     let uname = this.$store.state.user.uname;
     if (uname===undefined){
       uname=localStorage.getItem('uname')
     }
      getProducts("/porcelain/selectByPage", {
        pageNum: i,
        pageSize: 6,
        queryCondition: {
          userCode: uname,
        },
      })
        .then((rawData) => rawData.data)
        .then((res) => {
          this.i_list = res.records;
          this.total = res.pages*10;
        });

    },
    checkPorcelainList(data) {
      getCheckoutCate("/selectByPage", {
        pageNum: this.pageIndex, //开始的页数
        pageSize: 6, //每页显示的条数
        queryCondition: data,
      })
        .then((rawRes) => rawRes.data)
        .then((res) => {
          this.i_list = res.records;
        });
    },
  },
};
</script>

<style scoped>
.i-button {
  font-size: 14px;
  display: inline-block;
}
</style>
